<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>证书指导价配置</title>
    <link rel="stylesheet" href="https://tstatic.dgg.net/static/plugs/DataTables/css/jquery.dataTables.css">
    <link rel="stylesheet" href="https://tstatic.dgg.net/static/plugs/layui/css/layui.min.css">
    <link rel="stylesheet" href="https://tstatic.dgg.net/static/css/dgg-iboss.min.css">
    <link rel="stylesheet" href="https://tstatic.dgg.net/static/css/dgg-plugs.min.css">
    <link rel="stylesheet" href="../../css/aptitudes.min.css">
</head>
<body>
<div class="body-main">
    <div class="titleSearch">
        <div class="layui-inline">
            <label>所属月份：</label>
            <div class="layui-inline">
                <input type="text" name="startDate" placeholder="开始时间" class="Wdate input-style" id="d4311" onfocus="var d4312=$dp.$('d4312'); WdatePicker({onpicked:function(){d4312.focus();}, maxDate:'#F{ $dp.$D(\'d4312\')}', dateFmt:'yyyy-MM-dd'})">
            </div>
            <span>~</span>
            <div class="layui-inline">
                <input type="text" name="endDate" placeholder="结束时间" class="Wdate input-style" id="d4312" onfocus="WdatePicker({minDate:'#F{$dp.$D(\'d4311\')}', dateFmt:'yyyy-MM-dd'})">
            </div>
        </div>
        <div class="layui-inline">
            <label>所属事业部：</label>
            <div class="layui-input-inline">
                <select class="select-style" name="businessOrganizationId">
                    <option>全部</option>
                    <option value="1">成都资质事业部</option>
                    <option value="2">重庆资质事业部</option>
                    <option value="3">广州资质事业部</option>
                    <option value="4">北京资质事业部</option>
                    <option value="5">武汉资质事业部</option>
                    <option value="6">深圳资质事业部</option>
                    <option value="7">杭州资质事业部</option>
                </select>
            </div>
        </div>
        <div class="layui-inline">
            <label>所属类型：</label>
            <div class="layui-input-inline">
                <select class="select-style" name="businessOrganizationId">
                    <option>全部</option>
                    <option value="1">网站定制</option>
                    <option value="2">IDC业务</option>
                    <option value="3">企业邮箱</option>
                    <option value="4">企业短信</option>
                    <option value="5">APP制作</option>
                </select>
            </div>
        </div>
        <div class="layui-inline">
            <label>证书专业：</label>
            <div class="layui-input-inline">
                <select class="select-style" name="businessOrganizationId">
                    <option>全部</option>
                    <option value="1">网站定制</option>
                    <option value="2">IDC业务</option>
                    <option value="3">企业邮箱</option>
                    <option value="4">企业短信</option>
                    <option value="5">APP制作</option>
                </select>
            </div>
        </div>
        <div class="layui-inline">
            <label>证书等级：</label>
            <div class="layui-input-inline">
                <select class="select-style" name="businessOrganizationId">
                    <option>全部</option>
                    <option value="1">一级</option>
                    <option value="2">二级</option>
                    <option value="3">三级</option>
                </select>
            </div>
        </div>
        <div class="layui-inline">
            <label>地区：</label>
            <div class="layui-input-inline">
                <select class="select-style" name="businessOrganizationId">
                    <option>全国</option>
                    <option value="1">本地</option>
                </select>
            </div>
        </div>
        <div class="layui-inline">
            <label>适用范围：</label>
            <div class="layui-input-inline">
                <select class="select-style" name="businessOrganizationId">
                    <option>全国</option>
                    <option value="1">本地</option>
                </select>
            </div>
        </div>
        <div class="layui-inline">
            <button class="layui-btn layui-btn-mini layui-btn-normal">搜索</button>
            <button class="layui-btn layui-btn-mini layui-btn-primary">清空</button>
            <button class="layui-btn layui-btn-mini layui-btn-green">导出</button>
        </div>
    </div>
    <div class="table-conter">
        <a href="javascript:void(0)" class="layui-btn layui-btn-mini" onclick="addPrice()">新增指导价</a>
        <a href="javascript:void(0)" class="layui-btn layui-btn-mini" onclick="copyPrice()">复制指导价</a>
    </div>

    <table id="myTable" class="cell-border crm-table">
    </table>
</div>
<!--新增指导价 弹窗 start-->
<div  class="content-layer layui-layer-wrap" id="addPrice">
    <table class="add-table form-table">
        <tbody>
        <tr>
            <th><span class="required">事业部：</span></th>
            <td>
                <select name="" class="select-style">
                    <option>全部</option>
                    <option value="1">退回人才</option>
                    <option value="2">人才借用</option>
                    <option value="3">单位借用</option>
                    <option value="4">商务续签</option>
                    <option value="5">后台办理</option>
                </select>
            </td>
        </tr>
        <tr>
            <th><span class="required">证书类型：</span></th>
            <td>
                <select name="" class="select-style">
                    <option>全部</option>
                    <option value="1">退回人才</option>
                    <option value="2">人才借用</option>
                    <option value="3">单位借用</option>
                    <option value="4">商务续签</option>
                    <option value="5">后台办理</option>
                </select>
            </td>
        </tr>
        <tr>
            <th><span class="required">证书专业：</span></th>
            <td>
                <select name="" class="select-style">
                    <option>全部</option>
                    <option value="1">退回人才</option>
                    <option value="2">人才借用</option>
                    <option value="3">单位借用</option>
                    <option value="4">商务续签</option>
                    <option value="5">后台办理</option>
                </select>
            </td>
        </tr>
        <tr>
            <th><span class="required">证书等级：</span></th>
            <td>
                <select name="" class="select-style">
                    <option>全部</option>
                    <option value="1">退回人才</option>
                    <option value="2">人才借用</option>
                    <option value="3">单位借用</option>
                    <option value="4">商务续签</option>
                    <option value="5">后台办理</option>
                </select>
            </td>
        </tr>
        <tr>
            <th><span class="required">地区：</span></th>
            <td>
                <select name="" class="select-style">
                    <option value="1">本地</option>
                    <option value="2">全国</option>
                </select>
            </td>
        </tr>
        <tr>
            <th><span class="required">适用范围：</span></th>
            <td>
                <select name="" class="select-style">
                    <option value="1">本地</option>
                    <option value="2">全国</option>
                </select>
            </td>
        </tr>
        <tr>
            <th><span class="required">指导价格：</span></th>
            <td>
                <label class="input-unit">
                    <input type="text" class="input-style">
                    <span class="unit">元</span>
                </label>
            </td>
        </tr>
        </tbody>
    </table>
</div>
<!--新增指导价 弹窗 end-->
<!--复制指导价 弹窗 start-->
<div  class="content-layer layui-layer-wrap" id="copyPrice">
    <table class="add-table form-table">
        <tbody>
        <tr>
            <th>复制月份：</th>
            <td>
                <label class="time-line-warp">
                    <input type="text" class="input-style Wdate">
                    至
                    <input type="text" class="input-style Wdate">
                </label>
            </td>
        </tr>
        </tbody>
    </table>
</div>
<!--复制指导价 弹窗 end-->
<script src="https://tstatic.dgg.net/static/plugs/jquery/jquery-1.9.1.min.js"></script>
<script src="https://tstatic.dgg.net/static/plugs/layui/layui.all.js"></script>
<script src="https://tstatic.dgg.net/static/plugs/DataTables/js/jquery.dataTables.js"></script>
<script src="https://tstatic.dgg.net/static/plugs/DataTables/js/dataTables.fixedColumns.min.js"></script>
<script src="https://tstatic.dgg.net/static/plugs/DataTables/js/dataTable.extend.js"></script>
<script src="https://tstatic.dgg.net/static/js/dgg-foot-base.js"></script>
<script>
    $(function () {
        $('#myTable').dataTableExtend({
            "ajax": "https://www.easy-mock.com/mock/5b601a98e5570610098cc81f/interface/table.co",
//			    	"select":true,
			    	"scrollX":"true",//是否开启横项滚动
					"fixedColumns":   {//锁定列，只有开启scrollX时才生效
			            "leftColumns": 2,//左侧锁定2列
			            "rightColumns": 1//右侧锁定1列
			        },
            "aoColumns": [
                {
                    "title":"序号",
                    "render": function (data, type, full, meta) {
//			                    console.log(meta.row);
                        return meta.row+1;
                    }
                },
                {
                    "title":"所属事业部",
                    "data": "businessOrganizationId",
                    "orderable": false
                },
                {
                    "title":"所属月份",
                    "data": "createTime",
                    "orderable": false
                },
                {
                    "title":"证书类型",
                    "data": "no",
                    "orderable": false
                },
                {
                    "title":"证书专业",
                    "data": "createrName",
                    "orderable": false
                },
                {
                    "title":"证书等级",
                    "data": "lastFollowRecordUser",
                    "orderable": false
                },
                {
                    "title":"地区",
                    "data": "originType",
                    "orderable": false
                },
                {
                    "title":"适用范围",
                    "data": "createTime",
                    "orderable": false
                },
                {
                    "title":"应用状态",
                    "data": "lastFollowRecordContent",
                    "orderable": false
                },
                {
                    "title":"收证指导价（元）",
                    "data": "lastFollowRecordContent",
                    "orderable": false
                },
                {
                    "title":"使用指导价（元）",
                    "data": "lastFollowRecordContent",
                    "orderable": false,
                    "render":function (data, type, row, meta) {
                        // console.log(row)
                        return '<div class="operability-td"><span>'+data+'</span>' +
                            '<input type="text" class="input-style none" value="'+data+'"/>' +
                            '<a href="javascript:void(0)" class="iboss-link none" onclick="editPrice($(this))">编辑</a></div>';
                    }
                },
                {
                    "title":"最新操作时间",
                    "data": "createTime",
                    "orderable": false
                },
                {
                    "title":"最新操作人",
                    "data": "lastFollowRecordUser",
                    "orderable": false
                },
                {
                    "title":"操作",
                    "orderable": false,
                    "render":function (data, type, full, meta) {
                        return '<a href="javascript:void(0)" class="iboss-link">启用</a>'
                    }
                }
            ],
        });
    });
    function editPrice(obj) {
        var saveHtm='<a href="javascript:void(0)" class="iboss-link" onclick="savePrice($(this))">保存</a>'
        obj.parent().find('input').show();
        obj.parent().find('span').hide();
        obj.parent().append(saveHtm);
        obj.remove();
    }
    function savePrice(obj) {
        var editHtm='<a href="javascript:void(0)" class="iboss-link none" onclick="editPrice($(this))">编辑</a>';
        obj.parent().find('input').hide();
        obj.parent().find('span').show();
        obj.parent().append(editHtm);
        obj.remove();
    //    向后台保存编辑后的数据，再刷新table
    }
    //新增指导价
    function addPrice() {
        dgg.Open({
            title: '新增指导价',
            content: $('#addPrice'),
            area: '480px',
        })
    }
    //复制指导价
    function copyPrice() {
        dgg.Open({
            title: '复制指导价',
            content: $('#copyPrice'),
            area: '480px',
        })
    }
</script>
</body>
</html>